

//Black box Model
var blackBoxModelArray=[];

/**
 * Lumped and Parametric Models Models
 * @type {*[]}
 */
var parametericModelArray=[
    {abbreviation:"SWM",model:"Stanford Watershed Model",link:"http://hydrocomp.com/publications/journals/stanford-watershed/"},
    {abbreviation:"APEX",model:"Agricultural Policy/Environmental eXtender",link:"https://epicapex.tamu.edu/"},
    {abbreviation:"HEC-HMS",model:"Hydrologic Modeling System",link:"http://www.hec.usace.army.mil/software/hec-hms"},
    {abbreviation:"MIKE 11",model:"MIKE 11",link:"https://www.mikepoweredbydhi.com/products/mike-11"},
    {abbreviation:"UEB",model:"Utah Energy Balance Snowmelt Model",link:"http://hydrology.usu.edu/dtarb/snow/snow.html"},
    {abbreviation:"WATFLOOD",model:"Hydrological Model and Forecasting System",link:"http://www.civil.uwaterloo.ca/watflood/"},
    {abbreviation:"RORB",model:"RORB",link:"https://www.monash.edu/engineering/departments/civil/research/themes/water/rorb"},
    {abbreviation:"TANK",model:"TANK",link:""},
    {abbreviation:"SSARR",model:"Streamflow Synthesis and Reservoir Regulation",link:"https://pubs.usgs.gov/of/2001/ofr01439/pdf/ofr01-439.pdf"},
    {abbreviation:"ARNO",model:"ARNO rainfall—runoff model",link:"https://en.wikipedia.org/wiki/Arno"},
    {abbreviation:"Sacramento Model",model:"Sacramento Model",link:"https://wiki.ewater.org.au/display/SD41/Sacramento+Model+-+SRG"},
];

/**
 * Distributed Models
 * @type {*[]}
 */
var distributedModelsArray=[
    {abbreviation:"SWMM",model:"Storm Water Management Model",link:"http://geomodeling.njnu.edu.cn/OpenGMS/page/model-item-info/model-item-info.html?YjNhODhhZjEtMzU2OC00MjE5LTk5YzQtYWE4ZmJjZTMyMjdkNzA="},
    {abbreviation:"SWAT",model:"Soil and Water Assessment Tool",link:"http://geomodeling.njnu.edu.cn/OpenGMS/page/model-item-info/model-item-info.html?M2Y2ODU3YmEtYzJkMi00ZTI3LWIyMjAtNmU1MzY3ODAzYTEyYzA="},
    {abbreviation:"FVCOM",model:"The Unstructured Grid Finite Volume Community Ocean Model",link:"http://geomodeling.njnu.edu.cn/OpenGMS/page/model-item-info/model-item-info.html?NTczOGVmN2MtYTVhYy00NmI1LWEzNDctM2M4MjNmNzFiM2E3ZjU="},
    {abbreviation:"BDS",model:"数字流域系统应用开发软件",link:"http://geomodeling.njnu.edu.cn/OpenGMS/page/model-item-info/model-item-info.html?N2M2YjJiNjMtOGU2My00OTI4LTk0N2ItYmY0NTMwYWEwNGI4ZjU="},
    {abbreviation:"Ecomsed",model:"Ecomsed",link:"http://geomodeling.njnu.edu.cn/OpenGMS/page/model-item-info/model-item-info.html?MjNlN2ViNWEtMmU5Zi00YTQ5LWI0NDgtY2JhM2MwNjI0NjBjZjc="},
    {abbreviation:"Telemac2dSWMM",model:"Telemac2dSWMM",link:"http://www.opentelemac.org/"},
    {abbreviation:"CEQUEAU",model:"CEQUEAU",link:"http://www1.ete.inrs.ca/activites/modeles/cequeau/aindex.html"},
    {abbreviation:"C2VGSM",model:"Central Valley Groundwater and Surface water model",link:""},
    {abbreviation:"IWFM",model:"Integrated Water Flow Model",link:"http://baydeltaoffice.water.ca.gov/modeling/hydrology/IWFM/"},
    {abbreviation:"KINEROS2",model:"Kinematic Runoff and Erosion Model, Version 2",link:"http://www.tucson.ars.ag.gov/kineros/"},
    {abbreviation:"MIKE SHE",model:"MIKE SHE",link:"https://www.mikepoweredbydhi.com/products/mike-she"},
    {abbreviation:"TOPIKAPI",model:"TOPographic Kinematic Approximation and Integration",link:"http://www.progea.net/prodotti.php?p=TOPKAPI&lin=inglese"},
    {abbreviation:"HSPF",model:"Environmental Modeling Community of Practice",link:"https://www.epa.gov/ceam/hydrological-simulation-program-fortran-hspf"},
    {abbreviation:"新安江模型",model:"新安江模型",link:"https://baike.baidu.com/item/%E6%96%B0%E5%AE%89%E6%B1%9F%E6%A8%A1%E5%9E%8B"},
    {abbreviation:"陕北模型",model:"陕北模型",link:""}
    ];


var numOfModelPerRow=5;

$(document).ready(function () {

    /**
     * 加载分布式模型列表
     */
    $("#model-distributedmodels").click(function () {
        //用js写右边模型豆腐块列表
        var modelList=document.getElementById("distributed-modelList");
        modelList.innerHTML="";
        var rowNum=Math.ceil(distributedModelsArray.length/numOfModelPerRow);
        for (var i=0;i<rowNum;i++) //行
        {
            var row=document.createElement("div");
            row.setAttribute("class","row");

            for (var j=0;j<numOfModelPerRow;j++)  //每行6个
            {
                if ((i*numOfModelPerRow+j)<distributedModelsArray.length)
                {
                    var model=document.createElement("div");
                    model.setAttribute("class","col-md-55");

                    var modelThumbnail=document.createElement("div");
                    modelThumbnail.setAttribute("class","thumbnail");

                    var a=document.createElement("a");
                    a.setAttribute("href",distributedModelsArray[i*numOfModelPerRow+j].link);//每个模型的链接
                    a.setAttribute("target","_blank");  //target 属性规定在何处打开链接文档。_blank 浏览器总在一个新打开、未命名的窗口中载入目标文档。
                    var picPanel=document.createElement("div");
                    picPanel.setAttribute("class","image view view-first");
                    var img=document.createElement("img");
                    img.setAttribute("src","images/model/thumb.png");
                    var mask=document.createElement("div");
                    mask.setAttribute("class","mask");
                    var p=document.createElement("p");
                    p.innerText=distributedModelsArray[i*numOfModelPerRow+j].model;
                    mask.appendChild(p);
                    picPanel.appendChild(img);
                    picPanel.appendChild(mask);
                    a.appendChild(picPanel);
                    modelThumbnail.appendChild(a);

                    var caption=document.createElement("div");
                    caption.setAttribute("class","caption");
                    var p2=document.createElement("p");
                    p2.innerText=distributedModelsArray[i*numOfModelPerRow+j].abbreviation;
                    caption.appendChild(p2);
                    modelThumbnail.appendChild(caption);

                    model.appendChild(modelThumbnail);
                    row.appendChild(model);
                }
            }
            modelList.appendChild(row);
        }
        //隐藏div的两种方法
        // $("#distributed-modelList").attr("style","display:none;");
        // $("#distributed-modelList").hide();
        // $("#distributed-modelList .row").eq(0).show();
        // $("#distributed-modelList .row").eq(1).show();
        for (var i=2;i<rowNum;i++)
        {
            $("#distributed-modelList .row").eq(i).hide();
        }


        // $("#parametric-modelList .row").hide();  //层级选择器，选择所有class包含"modelPanel"中的class包含"info"中的class包含"row"字符串的元素
        // $(".modelList .row").eq(1).show();  //eq() 选择器选取带有指定 index 值的元素。此两句为默认只显示前两行的模型
        // $(".modelList .row").eq(2).hide();
        $(".modelPanel .expandBtn").html("Expand&nbsp; <i class=\"fa fa-caret-down\"></i>");//给Expand赋以内容
        $(".modelPanel .expand").css("display","block");
    });

    /**
     * 加载集总式模型列表
     */
    $("#model-parametricmodels").click(function () {
        //用js写右边模型豆腐块列表

        var modelList=document.getElementById("parametric-modelList");
        modelList.innerHTML="";
        var rowNum=Math.ceil(parametericModelArray.length/numOfModelPerRow);
        for (var i=0;i<rowNum;i++) //行
        {
            var row=document.createElement("div");
            row.setAttribute("class","row");

            for (var j=0;j<numOfModelPerRow;j++)  //每行6个
            {
                if ((i*numOfModelPerRow+j)<parametericModelArray.length)
                {
                    var model=document.createElement("div");
                    model.setAttribute("class","col-md-55");

                    var modelThumbnail=document.createElement("div");
                    modelThumbnail.setAttribute("class","thumbnail");

                    var a=document.createElement("a");
                    a.setAttribute("href",parametericModelArray[i*numOfModelPerRow+j].link);//每个模型的链接
                    a.setAttribute("target","_blank");  //target 属性规定在何处打开链接文档。_blank 浏览器总在一个新打开、未命名的窗口中载入目标文档。
                    var picPanel=document.createElement("div");
                    picPanel.setAttribute("class","image view view-first");
                    var img=document.createElement("img");
                    img.setAttribute("src","images/model/thumb.png");
                    var mask=document.createElement("div");
                    mask.setAttribute("class","mask");
                    var p=document.createElement("p");
                    p.innerText=parametericModelArray[i*numOfModelPerRow+j].model;
                    mask.appendChild(p);
                    picPanel.appendChild(img);
                    picPanel.appendChild(mask);
                    a.appendChild(picPanel);
                    modelThumbnail.appendChild(a);

                    var caption=document.createElement("div");
                    caption.setAttribute("class","caption");
                    var p2=document.createElement("p");
                    p2.innerText=parametericModelArray[i*numOfModelPerRow+j].abbreviation;
                    caption.appendChild(p2);
                    modelThumbnail.appendChild(caption);

                    model.appendChild(modelThumbnail);
                    row.appendChild(model);
                }
            }
            modelList.appendChild(row);
        }
        // $("#parametric-modelList .row").eq(0).show();   //eq() 选择器选取带有指定 index 值的元素。此两句为默认只显示前两行的模型
        // $("#parametric-modelList .row").eq(1).show();  //层级选择器，选择所有class包含"modelPanel"中的class包含"info"中的class包含"row"字符串的元素
        for (var i=2;i<rowNum;i++)
        {
            $("#parametric-modelList .row").eq(i).hide();
        }
        $(".modelPanel .info .expandBtn").html("Expand&nbsp; <i class=\"fa fa-caret-down\"></i>");//给Expand赋以内容
        $(".modelPanel .expand").css("display","block");
    });

    /**
     * 展开按钮
     */
    $(".expandBtn").click(function (e) {
        if($(this).text().indexOf("Expand")>=0){ //$(this)是当前元素被jQuery处理的对象,即expandBtn的jquery对象。如果expandBtn的text中包含Expand
            //显示剩余的每一行模型
            $(this).parent().siblings(".x_content").children(".row").show();//选择expandBtn的父亲的所有兄弟中class="info"的元素的孩子中class="row"的元素，显示

            $(this).html("Collapse&nbsp; <i class=\"fa fa-caret-up\"></i>");//同时给Collapse赋以内容
        }else{
            //隐藏所有行，然后只显示1.2行
            $(this).parent().siblings(".x_content").children(".row").hide();
            $(this).parent().siblings(".x_content").children(".row").eq(0).show();
            $(this).parent().siblings(".x_content").children(".row").eq(1).show();
            $(this).html("Expand&nbsp; <i class=\"fa fa-caret-down\"></i>");
        }
        e.preventDefault();
    });

    /**
     * 左边的目录树点击事件
     */
    $(".navbarPanel .navigation a").click(function () {
        var index = $(this).attr("index")*1;  //获取当前点击的navigation的index
        $(".infoPanel").hide();               //隐藏右边的所有页面
        $(".infoPanel").eq(index).show();     //显示click的一个
        if($(".infoPanel").eq(index).children(".info").children(".row").length<3){   //如果行数<3，则不显示expand
            $(".infoPanel").eq(index).children(".expand").hide();
        }
        $(".infoPanel").eq(index).children(".info").children(".row").eq(0).show();   //否则显示前两行
        $(".infoPanel").eq(index).children(".info").children(".row").eq(1).show();
    });

    var height = $(window).height();
    var minH = height-60;
    $(".infoPanel").css("min-height",minH+"px");

    window.onresize = function () {
        var height = $(window).height();
        var minH = height-60;
        $(".infoPanel").css("min-height",minH+"px");
    };
});

